<template lang="pug">
.page
  .CustomerBill.pall-20.bg-white
    Table.ivu-table-overflowY-hidden.beautiful-table(:columns="setThead" :data="tableData" :stripe="true" :loading="loading")
      .clearfix.font-16(slot="header")
        .table-title-lefttxt.font-16 单位费用明细
      template(slot-scope="{ row, index }" v-for="item in slotArr" :slot="item.slot")
        //- Button(v-if="item.slot === 'shenqingkaipiao' && hasPostInvoice" :type="item.type" size="small" @click="listenCall(item.fn, row)" :disabled="row.isInvoice || !row.isVerified") {{item.text}}
        //- Button(:type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'shebaomingxi' && hasSIDetails" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'gongjijinmingxi' && hasCPFDetails" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'shangbaomingxi' && hasCIDetails" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'xinzimingxi' && hasSalaryDetails" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'fuwufeimingxi' && hasServiceFeeTotal" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'mingxihuizong' && hasAllFeeTotal" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'fuwufeihuizong' && hasAllFeeTotal" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
        Button(v-if="item.slot == 'huizongbaobiao' && hasFeeSummaryReport" :type="item.type" size="small" @click="listenCall(item.fn, row)") {{item.text}}
      template(slot-scope="{ row, index }" slot="sgzd")
        Button(v-if="hasImportHandleBill" type="info" size="small" @click="importBtn(row.companyId,row.periodMonth,row.periodYear)" :disabled="row.isVerified") 导入
        Button.ml-10(v-if="hasImportHandleBill" type="info" size="small" @click="goManuaBill(row.companyName,row.companyId,row.periodMonth,row.periodYear)") 查看
      template(slot-scope="{ row, index }" slot="tiaozhang")
        Button(v-if="hasHandleBill" type="info" size="small" @click="handleShowAdjustBillModal(row)" :disabled="row.isVerified") 手工调账
      template(slot-scope="{ row, index }" v-for="item in slotArr" slot="shujuhedui")
        Button(v-if="hasBillCheck" type="info" size="small" @click="listenCall('handleShowDatacheckModal', row)" :disabled="row.isVerified") 核对完成
        Button.ml-10(v-if="hasBillUnCheck" type="info" size="small" @click="listenCall('handleShowDataUnCheckModal', row)" :disabled="!row.isVerified") 退回
        Button.ml-10(type="info" size="small" @click="listenCall('handleShowAuditDetailModal', row)") 审核详情
      template(slot-scope="{ row, index }" v-for="item in slotArr" slot="shenqingkaipiao")
        //- Button(v-if="hasPostInvoice" type="info" size="small" @click="listenCall('handleShowApplyInvoiceModal', row)" :disabled="row.isInvoice || !row.isVerified") 申请开票
        Button(v-if="hasPostInvoice" type="info" size="small" @click="goInvoiceApplyList(row)") 申请开票
      .clearfix.pl-20.pr-20(slot="footer")
        Page(
          :current="tableComone.pageIndex"
          :total="tableComone.totalRows"
          :page-size="tableComone.pageSize"
          @on-change="onChangePage"
          @on-page-size-change="onpageSizeChange"
          show-sizer
          show-total
          placement="top"
          prev-text="上一页"
          next-text="下一页"
          :page-size-opts="[5, 10, 20, 30, 50, 100]"
        )

    //- 申请开票弹窗
    ApplyInvoiceModal(ref="ApplyInvoiceModal" @query="query")
    //- 数据核对弹窗
    DatacheckModal(ref="DatacheckModal" @query="query")
    DataUncheckModal(ref="DataUncheckModal" @query="query")
    //- 服务费汇总表格弹窗
    TableFuwufeihuizongModal(ref="TableFuwufeihuizongModal")
    //- 服务费明细表格弹窗
    TableFuwufeimingxiModal(ref="TableFuwufeimingxiModal")
    //- 薪资明细表格弹窗
    TableXinzimingxiModal(ref="TableXinzimingxiModal" @handleShowChooseExportTemplateModal="handleShowChooseExportTemplateModal")
    //- 商保明细表格弹窗
    TableShangbaomingxiModal(ref="TableShangbaomingxiModal")
    //- 公积金明细表格弹窗
    TableGongjijinmingxiModal(ref="TableGongjijinmingxiModal")
    //- 社保明细表格弹窗
    TableShebaomingxiModal(ref="TableShebaomingxiModal")
    //- 社保汇总表格弹窗
    TableShebaohuizongModal(ref="TableShebaohuizongModal")
    //- 汇总报表表格弹窗
    TableHuizongbaobiaoModal(ref="TableHuizongbaobiaoModal")
    //- 明细汇总表格弹窗
    TableMingxihuizongModal(ref="TableMingxihuizongModal")
    //- 明细汇总表格弹窗
    AdjustBillModal(ref="AdjustBillModal" @query="query")
    //- 导入手工账单
    BatchImportModal(ref="BatchImportModal" :companyId="companyId" :periodMonth="periodMonth" :periodYear="periodYear" @query="query" @handleMaxSizeTen="handleMaxSizeTen")

    //- 选择导出模板弹窗
    ChooseExportTemplateModal(ref="ChooseExportTemplateModal" @handleShowChooseExportTemplateModal="handleShowChooseExportTemplateModal" @chooseTemplate="chooseTemplate")

    //- 明细汇总表格弹窗
    AuditDetailModal(ref="AuditDetailModal" @query="query")
</template>

<script>
import { BillApi } from '@/api/Bill.api.js'
import { billDetailThead } from './CBtableHead.js'
import _cloneDeep from 'clone-deep'
import ApplyInvoiceModal from './modal/applyInvoiceModal.vue'
import DatacheckModal from './modal/dataCheckModal.vue'
import DataUncheckModal from './modal/dataUnCheckModal.vue'
import TableFuwufeihuizongModal from './modal/tableFuwufeihuizongModal.vue'
import TableFuwufeimingxiModal from './modal/tableFuwufeimingxiModal.vue'
import TableXinzimingxiModal from './modal/tableXinzimingxiModal.vue'
import TableShangbaomingxiModal from './modal/tableShangbaomingxiModal.vue'
import TableGongjijinmingxiModal from './modal/tableGongjijinmingxiModal.vue'
import TableShebaomingxiModal from './modal/tableShebaomingxiModal.vue'
import TableShebaohuizongModal from './modal/tableShebaohuizongModal.vue'
import TableHuizongbaobiaoModal from './modal/tableHuizongbaobiaoModal.vue'
import TableMingxihuizongModal from './modal/tableMingxihuizongModal.vue'
import AdjustBillModal from './modal/adjustBillModal.vue'
import ChooseExportTemplateModal from '../publicModal/chooseExportTemplateModal.vue'
import BatchImportModal from './modal/BatchImportModal.vue'
import AuditDetailModal from './modal/auditDetailModal.vue'

export default {
  name: 'CustomerBill',

  components: {
    ApplyInvoiceModal,
    DatacheckModal,
    DataUncheckModal,
    TableFuwufeihuizongModal,
    TableFuwufeimingxiModal,
    TableXinzimingxiModal,
    TableShangbaomingxiModal,
    TableGongjijinmingxiModal,
    TableShebaomingxiModal,
    TableShebaohuizongModal,
    TableHuizongbaobiaoModal,
    TableMingxihuizongModal,
    AdjustBillModal,
    BatchImportModal,
    ChooseExportTemplateModal,
    AuditDetailModal
  },

  computed: {
    setThead () {
      if (!this.hasHandleBill) {
        return [...this.thead.slice(0, 24), ...this.thead.slice(25, this.thead.length + 1)]
      } else if (!this.hasImportHandleBill) {
        return [...this.thead.slice(0, 23), ...this.thead.slice(24, this.thead.length + 1)]
      } else {
        return this.thead
      }
      // return this.thead
    },
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 核对完成
    hasBillCheck () {
      return this.actionArr.indexOf('BillCheck') > -1
    },
    hasBillUnCheck () {
      return this.actionArr.indexOf('BillUnCheck') > -1
    },
    // 申请开票
    hasPostInvoice () {
      return this.actionArr.indexOf('PostInvoice') > -1
    },
    // 手工调账
    hasHandleBill () {
      return this.actionArr.indexOf('HandleBill') > -1
    },
    // 导入
    hasImportHandleBill () {
      return this.actionArr.indexOf('ImportHandleBill') > -1
    },
    // 社保明细
    hasSIDetails () {
      return this.actionArr.indexOf('SIDetails') > -1
    },
    // 公积金明细
    hasCPFDetails () {
      return this.actionArr.indexOf('CPFDetails') > -1
    },
    // 商保明细
    hasCIDetails () {
      return this.actionArr.indexOf('CIDetails') > -1
    },
    // 薪资明细
    hasSalaryDetails () {
      return this.actionArr.indexOf('SalaryDetails') > -1
    },
    // 服务费明细
    hasServiceFeeTotal () {
      return this.actionArr.indexOf('ServiceFeeTotal') > -1
    },
    // 汇总报表
    hasFeeSummaryReport () {
      return this.actionArr.indexOf('FeeSummaryReport') > -1
    },
    // 服务费汇总
    hasAllFeeTotal () {
      return this.actionArr.indexOf('AllFeeTotal') > -1
    }
  },

  data () {
    return {
      loading: false,
      companyId: '',
      periodMonth: 0,
      periodYear: 0,
      thead: _cloneDeep(billDetailThead),
      tableData: [{}],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 5 // 当前页面展示条数
      },
      slotArr: [
        { slot: 'shebaomingxi', text: '社保明细', type: 'text', fn: 'handleShowTableShebaomingxiModal' },
        { slot: 'gongjijinmingxi', text: '公积金明细', type: 'text', fn: 'handleShowTableGongjijinmingxiModal' },
        { slot: 'shangbaomingxi', text: '商保明细', type: 'text', fn: 'handleShowTableShangbaomingxiModal' },
        { slot: 'xinzimingxi', text: '薪资明细', type: 'text', fn: 'handleShowTableXinzimingxiModal' },
        { slot: 'fuwufeimingxi', text: '服务费明细', type: 'text', fn: 'handleShowTableFuwufeimingxiModal' },
        { slot: 'mingxihuizong', text: '明细汇总', type: 'text', fn: 'handleShowTableMingxihuizongModal' },
        { slot: 'shebaohuizong', text: '社保汇总', type: 'text', fn: 'handleShowTableShebaohuizongModal' },
        { slot: 'fuwufeihuizong', text: '服务费汇总', type: 'text', fn: 'handleShowTableFuwufeihuizongModal' },
        { slot: 'huizongbaobiao', text: '汇总报表', type: 'text', fn: 'handleShowTableHuizongbaobiaoModal' }
        // {slot: 'shujuhedui', text: '核对完成', type: 'info', fn: 'handleShowDatacheckModal'},
        // {slot: 'shenqingkaipiao', text: '申请开票', type: 'info', fn: 'handleShowApplyInvoiceModal'}
      ]
    }
  },

  watch: {
  },

  mounted () {
    this.query()
  },

  methods: {
    // 跳转手工账单列表
    goManuaBill (companyName,companyId,periodMonth,periodYear) {
      this.$router.push({name: 'manual-bill', query: {companyName:companyName,companyId:companyId,periodMonth:periodMonth,periodYear:periodYear}})
    },
    importBtn (id,month,year) {
      console.log(id,month,year)
      this.companyId = id
      this.periodMonth = month
      this.periodYear = year
      this.$refs.BatchImportModal.openModal()
    },
    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    },
    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        CompanyId: this.$route.query.companyId,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      this.loading = true
      let res = await BillApi.customerDetailedBillList(params)
      console.log('单位费用明细res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
        res.data.data.map(item => {
          item.items.map(c_item => {
            item[c_item.category] = c_item.amt
          })
        })
      } else {
        this.tableData = []
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
        this.$router.back(-1)
      }
      this.loading = false
      console.log('this.tableData: ', this.tableData)
    },

    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
      console.log('...values: ', ...values)
    },

    // 显示弹窗-申请开票
    handleShowApplyInvoiceModal (row) {
      console.log('row: ', row)
      this.$refs.ApplyInvoiceModal.isShowApplyInvoiceModal = true
      this.$refs.ApplyInvoiceModal.rowYear = row.periodYear
      this.$refs.ApplyInvoiceModal.rowMonth = row.periodMonth
    },

    // 显示弹窗-数据核对
    handleShowDatacheckModal (row) {
      this.$refs.DatacheckModal.isShowDataCheckModal = true
      this.$refs.DatacheckModal.rowYear = row.periodYear
      this.$refs.DatacheckModal.rowMonth = row.periodMonth
    },

    // 显示弹窗-数据核对退回
    handleShowDataUnCheckModal (row) {
      this.$refs.DataUncheckModal.isShowDataUnCheckModal = true
      this.$refs.DataUncheckModal.rowYear = row.periodYear
      this.$refs.DataUncheckModal.rowMonth = row.periodMonth
    },

    // 显示弹窗-服务费汇总表格
    handleShowTableFuwufeihuizongModal (row) {
      this.$refs.TableFuwufeihuizongModal.tableData = []
      this.$refs.TableFuwufeihuizongModal.isShowTableFuwufeihuizongModal = true
      this.$refs.TableFuwufeihuizongModal.year = row.periodYear
      this.$refs.TableFuwufeihuizongModal.month = row.periodMonth
      this.$refs.TableFuwufeihuizongModal.companyName = this.$route.query.companyName
      this.$refs.TableFuwufeihuizongModal.query()
    },

    // 显示弹窗-服务费明细表格
    handleShowTableFuwufeimingxiModal (row) {
      this.$refs.TableFuwufeimingxiModal.tableData = []
      this.$refs.TableFuwufeimingxiModal.isShowTableFuwufeimingxiModal = true
      this.$refs.TableFuwufeimingxiModal.year = row.periodYear
      this.$refs.TableFuwufeimingxiModal.month = row.periodMonth
      this.$refs.TableFuwufeimingxiModal.companyName = this.$route.query.companyName
      this.$refs.TableFuwufeimingxiModal.query()
    },

    // 显示弹窗-明细汇总表格
    handleShowTableMingxihuizongModal (row) {
      this.$refs.TableMingxihuizongModal.idCardNo = null
      this.$refs.TableMingxihuizongModal.tableData = []
      this.$refs.TableMingxihuizongModal.isShowTableMingxihuizongModal = true
      this.$refs.TableMingxihuizongModal.year = row.periodYear
      this.$refs.TableMingxihuizongModal.month = row.periodMonth
      this.$refs.TableMingxihuizongModal.companyName = this.$route.query.companyName
      this.$refs.TableMingxihuizongModal.query()
    },

    // 显示弹窗-薪资明细表格
    handleShowTableXinzimingxiModal (row) {
      this.$refs.TableXinzimingxiModal.tableData = []
      this.$refs.TableXinzimingxiModal.isShowTableXinzimingxiModal = true
      this.$refs.TableXinzimingxiModal.year = row.periodYear
      this.$refs.TableXinzimingxiModal.month = row.periodMonth
      this.$refs.TableXinzimingxiModal.companyName = this.$route.query.companyName
      this.$refs.TableXinzimingxiModal.query()
    },

    // 显示弹窗-商保明细表格
    handleShowTableShangbaomingxiModal (row) {
      this.$refs.TableShangbaomingxiModal.tableData = []
      this.$refs.TableShangbaomingxiModal.isShowTableShangbaomingxiModal = true
      this.$refs.TableShangbaomingxiModal.year = row.periodYear
      this.$refs.TableShangbaomingxiModal.month = row.periodMonth
      this.$refs.TableShangbaomingxiModal.companyName = this.$route.query.companyName
      this.$refs.TableShangbaomingxiModal.query()
    },

    // 显示弹窗-公积金明细表格
    handleShowTableGongjijinmingxiModal (row) {
      this.$refs.TableGongjijinmingxiModal.tableData = []
      this.$refs.TableGongjijinmingxiModal.isShowTableGongjijinmingxiModal = true
      this.$refs.TableGongjijinmingxiModal.year = row.periodYear
      this.$refs.TableGongjijinmingxiModal.month = row.periodMonth
      this.$refs.TableGongjijinmingxiModal.companyName = this.$route.query.companyName
      this.$refs.TableGongjijinmingxiModal.query()
    },

    // 显示弹窗-社保明细表格
    handleShowTableShebaomingxiModal (row) {
      this.$refs.TableShebaomingxiModal.tableData = []
      this.$refs.TableShebaomingxiModal.isShowTableShebaomingxiModal = true
      this.$refs.TableShebaomingxiModal.year = row.periodYear
      this.$refs.TableShebaomingxiModal.month = row.periodMonth
      this.$refs.TableShebaomingxiModal.companyName = this.$route.query.companyName
      this.$refs.TableShebaomingxiModal.query()
    },

    // 显示弹窗-社保汇总表格
    handleShowTableShebaohuizongModal (row) {
      this.$refs.TableShebaohuizongModal.tableData = []
      this.$refs.TableShebaohuizongModal.isShowTableShebaohuizongModal = true
      this.$refs.TableShebaohuizongModal.year = row.periodYear
      this.$refs.TableShebaohuizongModal.month = row.periodMonth
      this.$refs.TableShebaohuizongModal.companyName = this.$route.query.companyName
      this.$refs.TableShebaohuizongModal.query()
    },

    // 显示弹窗-汇总报表表格
    handleShowTableHuizongbaobiaoModal (row) {
      this.$refs.TableHuizongbaobiaoModal.tableData = []
      this.$refs.TableHuizongbaobiaoModal.isShowTableHuizongbaobiaoModal = true
      this.$refs.TableHuizongbaobiaoModal.companyId = this.$route.query.companyId
      this.$refs.TableHuizongbaobiaoModal.companyName = this.$route.query.companyName
      this.$refs.TableHuizongbaobiaoModal.year = row.periodYear
      this.$refs.TableHuizongbaobiaoModal.month = row.periodMonth
      this.$refs.TableHuizongbaobiaoModal.query()
      this.$refs.TableHuizongbaobiaoModal.customerPayInfo()
    },

    // 显示弹窗-手工调账
    handleShowAdjustBillModal (row) {
      this.$refs.AdjustBillModal.currentPeriodYear = row.periodYear
      this.$refs.AdjustBillModal.currentPeriodMonth = row.periodMonth
      this.$refs.AdjustBillModal.currentCompanyName = this.$route.query.companyName
      this.$refs.AdjustBillModal.currentCompanyId = this.$route.query.companyId
      this.$refs.AdjustBillModal.getHandelList()
      this.$refs.AdjustBillModal.isShowAdjustBillModal = true
    },    

    // 显示弹窗-审核详情
    handleShowAuditDetailModal (row) {
      // this.$refs.AuditDetailModal.isShowAuditDetailModal = true
      // this.$refs.AuditDetailModal.rowYear = row.periodYear
      // this.$refs.AuditDetailModal.rowMonth = row.periodMonth
      this.$refs.AuditDetailModal.show(row)
    },

    // 去往手工调账页面
    handleGoAdjustBill (row) {
      console.log('row: ', row)
      this.$router.push({
        path: '/AdjustBill',
        name: 'AdjustBill',
        query: {
          companyId: this.$route.query.companyId,
          companyName: this.$route.query.companyName,
          periodYear: row.periodYear,
          periodMonth: row.periodMonth
        }
      })
    },

    goInvoiceApplyList (row) {
      this.$router.push({
        path: '/invoiceApplyList',
        name: 'invoiceApplyList',
        // query: {
        //   isFromCustomerBill: true
        // }
      })
    },

    // 选择导出模板 弹窗-显示
    handleShowChooseExportTemplateModal (month) {
      console.log('账单详情 触发了父组件里的方法', month)
      this.$refs.ChooseExportTemplateModal.searchValue = ''
      this.$refs.ChooseExportTemplateModal.show(21, month, this.$route.query.companyId)
      this.$refs.ChooseExportTemplateModal.getExportList()
    },

    // 确定选择导出模板
    chooseTemplate (templateId) {
      console.log('确定选择导出模板: ', templateId)
      this.$refs.TableXinzimingxiModal.exportSalaryDetails(templateId)
    }
  } // methods end
}
</script>

<style lang="less" scope>
</style>
